<template>
  <div class="safetyButtonAdd">
    <el-button type="primary" size="small" @click="dialogFormVisibleAdd = true">新增</el-button>
    <el-dialog :close-on-click-modal="false" :append-to-body="true"  title="新增" :visible.sync="dialogFormVisibleAdd" @opened="$store.commit('dialogTop')" @close="resetForm('ruleFormAdd')">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="企业" prop="enterpriseNo" :rules="{required: true, message: '企业不能为空', }">
          <el-select  v-model="ruleFormAdd.enterpriseNo" size="small"  clearable placeholder="企业">
            <el-option
              v-for="item in this.$store.state.companyInfos"
              :key="item.enterpriseNo+''"
              :label="item.enterpriseName"
              :value="item.enterpriseNo+''">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员类型" prop="userType"  :rules="{required: true, message: '人员类型不能为空', }">
          <el-select  v-model="ruleFormAdd.userType" size="small"  clearable placeholder="人员类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员姓名" prop="userName"  :rules="{required: true, message: '人员姓名不能为空', }">
          <el-input  size="small" v-model="ruleFormAdd.userName" auto-complete="off" placeholder="人员姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contact"  required>
          <el-input  size="small" v-model="ruleFormAdd.contact"  auto-complete="off" placeholder="联系电话"></el-input>
        </el-form-item>
        <el-form-item label="行政区域" prop="noValue" required>
          <div style="display: inline-block;width: 49%;">
            <el-form-item prop="district" label-width="0"  :rules="{required: true, message: '行政区域不能为空', }">
            <el-select v-model="ruleFormAdd.district" @change="changeDistrict(ruleFormAdd.district)" size="small"
                       :disabled="$store.state.userInfo.regionId?true:false"    clearable placeholder="行政区">
              <el-option
                v-for="item in $store.state.districtData"
                :key="item.id"
                :label="item.regionName"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </div>
          <div style="display: inline-block;width: 49%;">
            <el-form-item prop="street" label-width="0"  :rules="{required: true, message: '街道不能为空', }">
          <el-select v-model="ruleFormAdd.street" size="small" clearable placeholder="街道">
            <el-option
              v-for="item in streetData"
              :key="item.id"
              :label="item.regionName"
              :value="item.id">
            </el-option>
          </el-select>
            </el-form-item>
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin-bottom: 8px;">
        <el-button type="primary" size="small" @click="submitForm('ruleFormAdd')">提 交</el-button>
        <el-button  size="small" @click="dialogFormVisibleAdd = false">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>

  export default {
    props:[],
    data () {
      var phoneCheck = (rule, value, callback) => {
        var phnum = /^1[3456789]{1}\d{9}$/
        if (value === '') {
          callback(new Error('联系电话不能为空'));
        }else if(!phnum.exec(Number(value))){
          callback(new Error('请正确输入手机号！'));
        } else {
          callback();
        }
      };
      return {
        options:[{label:"值班人员",value:0},{label:"应急人员",value:1}],
        ruleFormAdd: {
          "enterpriseNo":"",
          "userType":"",
          "userName":"",
          "contact":"",
          "district":this.$store.state.userInfo.regionId,
          "street":"",
          noValue:"noValue"
        },
        streetData:[],
        dialogFormVisibleAdd: false,
        rulesAdd: {
          contact: [
            {validator: phoneCheck, }
          ],
        }
      }
    },
    created(){
      setTimeout(()=>{
        if(this.$store.state.userInfo.regionId){this.changeDistrict(this.ruleFormAdd.district)}
      },500)
    },
    methods: {
        //获取街道
      changeDistrict(district){
        if(!district){
          this.ruleFormAdd.street=""
          this.streetData=[]
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion',{parentId:district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })
      },
      //提交回调
      handleDiaSureAdd(){
        this.axios.post(process.env.API_HOST + '/enterprise/insertSafeUser', this.ruleFormAdd)
          .then(response => {
            let result=response.data
            if (result.code == 200) {
              this.$message({
                type: 'success',
                message: '新增成功!'
              });
              this.dialogFormVisibleAdd = false
              this.$emit('searchRowsInfo')
              this.resetForm('ruleFormAdd')
            }

          })
          .catch(error => {
            console.log(error);
          });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSureAdd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .safetyButtonAdd
    display inline-block
    margin-left 10px
</style>
